<script lang="ts" setup>
import { ComputedRef, computed, onMounted, ref } from 'vue';
import { KeyValues } from '../../utils/types';
import { FormInstance, FormItemRule } from 'element-plus';
import { createRequiredRule, createNonEmptyRule, flowStatusSelect } from '../../utils'
import { apiAPI, apiFlowRate } from '../../api';

const props = defineProps<{
  row?: any
}>()

const emit = defineEmits(['close', 'submitted'])

const form = ref<KeyValues>({
  bizType: 0,
  status: flowStatusSelect.ENABLED,
  creator: '测试人员321'
})

const formRef = ref<FormInstance>()

const rules: ComputedRef<{ [k: string]: FormItemRule }> = computed(() => {
  return {
    count: createNonEmptyRule('请输入请求阈值'),
    timeWindow: createNonEmptyRule('请输入时间窗'),
    ...(props.row ? {} : { bizId: createRequiredRule('请输入API名称') })
  }
})

const close = () => emit('close')

const loading = ref(false)

const onOk = async () => {
  await formRef.value.validate()
  loading.value = true
  try {
    await apiFlowRate.save(form.value)
    emit('submitted')
  } finally {
    loading.value = false
  }
}

const apiLoading = ref(false)

const apiList = ref([])

const getApiList = async (name: string) => {
  apiLoading.value = true
  name = name.trim()
  if (name) {
    try {
      const res = await apiAPI.pageList({ name, pageNum: 1, pageSize: 10 })
      apiList.value = res.rows
    } finally {
      apiLoading.value = false
    }
  } else {
    apiList.value = []
  }
}

const updateApiName = (id: any) => {
  form.value = {
    ...form.value,
    name: (apiList.value.find(_ => _.apiId === id) || {}).name
  }
}

onMounted(() => {
  const { row } = props
  if (row) {
    form.value = { ...row, name: row.apiName }
  }
})
</script>

<template>
  <ElDialog>
    <ElForm ref="formRef" label-width="6em" :model="form" :rules="rules">
      <ElFormItem label="API名称" prop="bizId">
        <ElInput v-if="row" disabled v-model="form.name" />
        <ElSelect
          v-else
          v-model="form.bizId"
          filterable
          remote
          :loading="apiLoading"
          :remote-method="getApiList"
          @change="updateApiName">
          <ElOption v-for="_ in apiList" :key="_.apiId" :value="_.apiId" :label="_.name" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="请求阈值" prop="count">
        <ElInputNumber v-model="form.count" controls-position="right" :min="1" />
        <span style="margin-left: 5px;">次</span>
      </ElFormItem>
      <ElFormItem label="时间窗" prop="timeWindow">
        <ElInputNumber v-model="form.timeWindow" controls-position="right" :min="1" />
        <span style="margin-left: 5px;">秒</span>
      </ElFormItem>
      <ElFormItem label="状态" prop="status">
        <ElRadioGroup v-model="form.status">
          <ElRadio v-for="_ in flowStatusSelect.data" :key="_.value" :label="_.value">
            {{ _.label }}
          </ElRadio>
        </ElRadioGroup>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="close">取消</ElButton>
      <ElButton type="primary" :loading="loading" @click="onOk">确定</ElButton>
    </template>
  </ElDialog>
</template>
